<template>
  <div class="home">
    <div class="home-top" :style="{ backgroundColor: color }">
      <div class="home-top-left" @click="btnClick('/classify')">
        <img class="home-top-list" src="../images/list.png" alt="" />
      </div>
      <div class="home-top-center">
        <div class="home-top-center-left">
          <img class="home-top-jd" src="../images/fire.png" alt="" />
        </div>
        <div class="home-top-center-center">
          <img class="home-top-search" src="../images/search.png" alt="" />
        </div>
        <div class="home-top-input" @click="btnClick('./search')">
          <p>九阳榨汁机</p>
        </div>
      </div>
      <div class="home-top-right" @click="btnClick1()">
        <img class="home-top-me" src="../images/me.png" alt="" />
      </div>
    </div>
    <!-- 内容区 -->
    <div class="home-middle">
      <!-- 轮播图 -->
      <div class="home-swiper" ref="swiper" :style="{ zIndex: zIndex }">
        <div class="bgcolor"></div>
        <my-swiper :SwiperItems="SwiperItems"></my-swiper>
      </div>
      <!-- 广告区 -->
      <div class="advertise">
        <div
          class="advertise-div"
          v-for="item in AdvertiseItems"
          :key="item.id"
        >
          <img
            class="adcertiseImg"
            :src="item.img"
            alt=""
            @click="btnClickA(item.url)"
          />
        </div>
      </div>

      <!-- 导航栏 -->
      <div class="nav">
        <el-carousel class="myNav" :autoplay="false" ref="myswiper">
          <el-carousel-item name="nav1">
            <ul class="myNav-ul">
              <li
                class="myNav-li"
                v-for="item in NavItems1"
                :key="item.id"
                @click="btnClickA(item.url)"
                @touchend="touchend"
                @touchstart="touchstart"
              >
                <img class="myNav-img" :src="item.img" alt="" />
                <p class="myNav-title">{{ item.title }}</p>
              </li>
            </ul>
          </el-carousel-item>
          <el-carousel-item name="nav2">
            <ul class="myNav-ul">
              <li
                class="myNav-li"
                v-for="item in NavItems2"
                :key="item.id"
                @click="btnClickA(item.url)"
                @touchend="touchend"
                @touchstart="touchstart"
              >
                <img class="myNav-img" :src="item.img" alt="" />
                <p class="myNav-title">{{ item.title }}</p>
              </li>
            </ul>
          </el-carousel-item>
        </el-carousel>
      </div>
      <!-- 秒杀区 -->
      <div class="kill">
        <div
          class="kill-top"
          @click="
            btnClickA('https://wqs.jd.com/portal/wx/seckill_m/index.shtml?st=1')
          "
        >
          <p class="p-miaosha">火火秒杀</p>
          <span class="span-hours">{{ time }}</span>
          <img
            class="img-dianchang"
            src="https://wq.360buyimg.com/wxsq_project/portal/m_jd_index/images/seckill-time-to_1de70c91.png"
            alt=""
          />
          <div class="timer">
            <span ref="hours">{{ hours }}</span>
            <span>:</span>
            <span ref="minutes">{{ minutes }}</span>
            <span>:</span>
            <span ref="seconds">{{ seconds }}</span>
          </div>
          <p class="p-genduo">更多秒杀</p>
          <img
            class="img-genduo"
            src="https://wq.360buyimg.com/wxsq_project/portal/m_jd_index/images/arrow_rt_2ccb8cd5.png"
            alt=""
          />
        </div>
        <ul class="kill-content">
          <li
            class="kill-li"
            v-for="item in KillItems"
            :key="item.id"
            @click="btnClickA(item.url)"
          >
            <img class="kill-img" :src="item.img" alt="" />
            <p class="kill-pNew">{{ item.priceNew }}</p>
            <p class="kill-pOld">{{ item.priceOld }}</p>
          </li>
          <div class="div-quanbu" @click="btnClickA('https://wqs.jd.com/portal/wx/seckill_m/index.shtml?st=1')">
            <img
              class="span-quanbu-img"
              src="../images/span-quanbu.png"
              alt=""
            />
            <span class="span-quanbu" >查看全部</span>
          </div>
        </ul>
      </div>
      <!-- 楼层区1 -->
      <div class="floor1">
        <ul class="floor1-ul">
          <li
            class="floor1-li"
            v-for="item in Floor1Items"
            :key="item.id"
            @click="btnClickA(item.url)"
          >
            <img class="floor1-imgOut" :src="item.imgOut" alt="" />
            <img class="floor1-imgIn" :src="item.imgIn" alt="" />
            <p class="floor1-span1">{{ item.span1 }}</p>
            <p class="floor1-span2">{{ item.span2 }}</p>
          </li>
        </ul>
      </div>
      <!-- 楼层区2 -->
      <div class="floor2">
        <div
          class="floor2-div"
          v-for="item in Floor2Items"
          :key="item.id"
          @click="btnClickA(item.url)"
        >
          <p class="floor2-title">{{ item.title }}</p>
          <p class="floor2-msg">{{ item.msg }}</p>
          <img class="floor2-img" :src="item.img1" alt="" />
          <img class="floor2-img" :src="item.img2" alt="" />
        </div>
      </div>
      <!-- 楼层区3 -->
      <div class="floor3">
        <div
          class="floor3-div"
          v-for="item in Floor3Items"
          :key="item.id"
          @click="btnClickA(item.url)"
        >
          <p class="floor3-title">{{ item.title }}</p>
          <p class="floor3-msg">{{ item.msg }}</p>
          <img class="floor3-img" :src="item.img" alt="" />
        </div>
      </div>
      <!-- 楼层区4 -->
      <div class="floor4">
        <div
          class="floor4-div"
          v-for="item in Floor4Items"
          :key="item.id"
          @click="detali(item.id)"
        >
          <div class="floor4-top">
            <img class="floor4-img" v-lazy="item.img" alt="" />
          </div>
          <div class="floor4-middle">
            <img class="floor4-shopImg" :src="item.shopImg" alt="" />
            <span class="floor4-msg">{{ item.msg }}</span>
          </div>
          <div class="floor4-bottom">
            <div class="floor4-p">
              <p class="floor4-price">{{ item.price }}</p>
              <p class="floor4-active">{{ item.active }}</p>
            </div>
            <div class="floor4-kan">看相似</div>
          </div>
          <p class="floor4-vip">
            <span class="floor4-vipPrice">{{ item.vipPrice }}</span>
            <img class="floor4-plus" :src="item.plus" alt="" />
          </p>
        </div>
      </div>
      <!-- 加载区 -->
      <div class="home-loading">
        <p class="jiazai">点击继续加载</p>
      </div>
      <!-- 底部 -->
      <div class="home-footer">
        <div class="home-footer-top">
          <p
            @click="
              btnClickA(
                'https://plogin.m.jd.com/login/login?appid=100&kpkey=&returnurl=http%3A%2F%2Fhome.m.jd.com%2FmyJd%2Fhome.action'
              )
            "
          >
            登录
          </p>
          <p
            @click="
              btnClickA(
                'https://plogin.m.jd.com/mreg/index?appid=461&returnurl=http%3A%2F%2Fhome.m.jd.com%2FmyJd%2Fhome.action&ipChanged='
              )
            "
          >
            注册
          </p>
          <p
            @click="
              btnClickA(
                'https://plogin.m.jd.com/login/login?appid=300&returnurl=https%3A%2F%2Fwqlogin1.jd.com%2Fmlogin%2Fmpage%2FMpLoginRedirect%3Fmonitor%3D26804750782718814-1623299259-133643-8176055527424396691%26state%3Dd315fe641bdedbea68ee0db2822f41d3'
              )
            "
          >
            客服服务
          </p>
          <p>
            <a href="#">返回顶部</a>
          </p>
        </div>
        <div class="home-footer-middle">
          <div
            @click="
              btnClickA(
                'https://h5.m.jd.com/active/download/download.html?channel=jd-m'
              )
            "
          >
            <img src="../images/kehuduan.png" alt="" />
          </div>
          <div @click="btnClickA('https://www.jd.com/#m')">
            <img src="../images/guojiban.png" alt="" />
          </div>
          <div @click="btnClickA('https://www.jd.com/#m')">
            <img src="../images/diannaoban.png" alt="" />
          </div>
        </div>
        <div class="home-footer-copy">
          <p>Copyright © 2004-2020 火火HH.com 版权所有</p>
        </div>
      </div>
    </div>
    <!-- 返回顶部按钮 -->
    <a href="#" class="backTop" :style="{ zIndex: backTop }">
      <img src="../images/backTop.png" alt="" />
    </a>
    <Footer></Footer>
  </div>
</template>


<script >
import Footer from "./Footer.vue";
import mySwiper from "./Swiper.vue";

export default {
  name: "Home",
  data() {
    return {
      SwiperItems: [],
      AdvertiseItems: [],
      NavItems1: [],
      NavItems2: [],
      KillItems: [],
      Floor1Items: [],
      Floor2Items: [],
      Floor3Items: [],
      Floor4Items: [],
      zIndex: "",
      backTop: -1,
      color: "#5e31c4",
      hash: "/",
      time: "",
      hours: "",
      minutes: "",
      seconds: "",
    };
  },
  
computed:{
      denglu(){
        return this.$store.state.denglu
      }
  },
  methods: {
    btnClick1(){
if(this.denglu==true){
 this.$router.push({
        path: "/mepage",
      });
      }else{
         this.$router.push({
        path: "/register",
      });
      }
    },
    btnClick(hash) {
      this.$router.push({
        path: hash,
      });
    },
    btnClickA(url) {
      window.location.href = url;
    },
    detali(id) {
      this.$router.push({
        path: "/detaile",
        query: {
          id: id,
        },
      });
    },
    touchstart(event) {
      this.startX = event.changedTouches[0].pageX;
    },

    touchend(event) {
      let start = event.changedTouches[0].pageX;
      let num = start - this.startX;
      if (num < 0) {
        this.$refs.myswiper.next();
      } else {
        this.$refs.myswiper.prev();
      }
    },
  },
  watch: {
    $route(newVal) {
      this.hash = newVal.path;
    },
  },
  mounted() {
    let that = this;
    window.addEventListener("scroll", function (e) {
      let top = e.target.scrollingElement.scrollTop;
      if (top > 0) {
        that.zIndex = 1;
        that.color = "#E43130";
        if (top > 500) {
          that.backTop = 999;
        } else {
          that.backTop = -1;
        }
      } else {
        that.zIndex = 999;
        that.color = "#5e31c4";
        that.backTop = -1;
      }
    });
  },
  components: {
    Footer,
    mySwiper,
  },
  created() {
    window.parent.scrollTo(0, 0)
    this.hash = this.$route.path;
    let that = this;

    let year = new Date().getFullYear();
    let month = new Date().getMonth();
    let data = new Date().getDate();
    let hour = new Date().getHours();
    let a = new Date(year, month, data, hour + 1, 0, 0).getTime();

    setInterval(() => {
      let b = new Date().getTime();
      let time = new Date().getHours();
      let hours = (a - b) / 1000 / 60 / 60;
      let h = parseInt(hours);
      let minutes = (a - b - h * 60 * 60 * 1000) / 1000 / 60;
      let m = parseInt(minutes);
      let seconds = (a - b - h * 60 * 60 * 1000 - m * 60 * 1000) / 1000;
      let s = parseInt(seconds);
      if (h <= 9) {
        that.hours = "0" + h;
      } else {
        that.hours = h;
      }
      if (m <= 9) {
        that.minutes = "0" + m;
      } else {
        that.minutes = m;
      }
      if (s <= 9) {
        that.seconds = "0" + s;
      } else {
        that.seconds = s;
      }
      that.time = time;
    }, 1000);

    let url = "./data/index.json";
    this.axios
      .get(url)
      .then(function (response) {
        that.SwiperItems = response.data.Home.lunbotu;
        that.AdvertiseItems = response.data.Home.advertisement;
        that.NavItems1 = response.data.Home.navigation1;
        that.NavItems2 = response.data.Home.navigation2;
        that.KillItems = response.data.Home.kill;
        that.Floor1Items = response.data.Home.floor1;
        that.Floor2Items = response.data.Home.floor2;
        that.Floor3Items = response.data.Home.floor3;
        that.Floor4Items = response.data.Home.floor4;
      })
      .catch(function (error) {
        console.log(error);
      });
  },
};
</script>

<style >
.home {
  width: 100%;
  height: 100%;
  display: flex;
}
/* 顶部 */
.home-top {
  height: 3rem;
  display: flex;
  width: 100%;
  flex-direction: row;
  align-items: center;
  flex-direction: row;
  position: fixed;
  top: 0;
  z-index: 99;
}
.home-top-left,
.home-top-right {
  width: 3rem;
  height: 100%;
  flex-shrink: inherit;
  display: flex;
  padding-top: 0.2rem;
}
.home-top-list,
.home-top-me {
  margin: auto;
  width: 1.7rem;
  height: 1.7rem;
}

.home-top-center {
  flex: 1;
  display: flex;
  flex-direction: row;
  align-items: center;
  background: #fff;
  height: 2rem;
  border-radius: 1rem;
  margin-top: 0.4rem;
}

.home-top-center-left {
  width: 2.5rem;
  height: 1.8rem;
  display: flex;
  margin-top: 0.15rem;
}
.home-top-jd {
  width: 1.2rem;
  height: 1.3rem;
  margin: auto;
}
.home-top-center-center {
  width: 2.5rem;
  height: 1.3rem;
  border-left: 1px solid #ddd;
  display: flex;
}
.home-top-search {
  width: 1.3rem;
  height: 1.3rem;
  margin: auto;
}
.home-top-input {
  flex: 1;
  height: 1.8rem;
  margin-left: 0.5rem;
  line-height: 1.8rem;
  color: #999;
  font-size: 0.7rem;
}
/* 内容区 */
.home-middle {
  flex: 1;
  width: 100%;
  height: 100%;
  background-color: #f3f3f3;
  overflow-y: auto;
  overflow-x: hidden;
  border-bottom: 1px solid #f3f5f7;
}
::-webkit-scrollbar {
  display: none;
}
/* 轮播 */
.home-swiper {
  width: 100%;
  height: 7.5rem;
  margin-top: 2.8rem;
  position: relative;
}
.home-swiper .bgcolor {
  width: 100%;
  height: 5rem;
  background: #5e31c4;
  position: absolute;
  top: 0;
  border-bottom-left-radius: 0.7rem;
  border-bottom-right-radius: 0.7rem;
}
/* 广告 */
.advertise {
  width: 100%;
  height: 5.625rem;
  display: flex;
  justify-content: center;
  margin-top: 0.3rem;
  background-color: #fff;
  border-radius: 0.625rem;
}

.advertise-div:nth-child(1),
.advertise-div:nth-child(3) {
  width: 5rem;
  height: 5.625rem;
}
.advertise-div:nth-child(2) {
  width: 8rem;
  height: 5.625rem;
}
.adcertiseImg {
  width: 100%;
  height: 100%;
}
.advertise-div:nth-child(1) > .adcertiseImg {
  border-top-left-radius: 0.625rem;
  border-bottom-left-radius: 0.625rem;
}
.advertise-div:nth-child(3) > .adcertiseImg {
  border-top-right-radius: 0.625rem;
  border-bottom-right-radius: 0.625rem;
}
/* 导航栏 */
.myNav {
  width: 100%;
  height: 9.0625rem;
  padding-top: 0.625rem;
  background-color: #f6f6f6;
  overflow: hidden;
}
.myNav-ul {
  width: 100%;
  height: 9.0625rem;
  display: flex;
  flex-wrap: wrap;
}
.myNav-li {
  width: 4rem;
  height: 4rem;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.myNav-img {
  width: 2.125rem;
  height: 2.125rem;
}
.myNav-title {
  font-size: 0.75rem;
  color: #979797;
  margin-top: 0.3125rem;
}
/* 秒杀 */
.kill {
  width: 90%;
  height: 8rem;
  margin: 0 auto;
  background-color: #fff;
  border-radius: 0.625rem;
  padding: 0 0.625rem;
  margin: 0 0.625rem;
}
.kill-top {
  height: 1.875rem;
  display: flex;
  flex-direction: row;
  align-items: center;
}
.p-miaosha {
  font-size: 0.875rem;
}
.span-hours {
  font-size: 0.75rem;
  color: #ff2766;
  margin-left: 0.625rem;
}
.img-dianchang {
  width: 0.9375rem;
  height: 0.9375rem;
}
.timer {
  display: flex;
  flex-direction: row;
  width: 3.4375rem;
  height: 0.9375rem;
  margin-left: 0.625rem;
}
.timer span {
  font-size: 0.75rem;
}
.timer span:nth-child(2n) {
  color: #f2275a;
}
.timer span:nth-child(2n-1) {
  color: #fff;
  background-color: #fc3a28;
  border-radius: 0.2125rem;
}
.p-genduo {
  font-size: 0.875rem;
  color: #f23030;
  margin-left: 3.8rem;
}
.img-genduo {
  width: 0.625rem;
  height: 0.625rem;
}

.kill-content {
  width: 100%;
  height: 5.5rem;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  overflow: auto;
  background-color: #fff;
}
.kill-content::-webkit-scrollbar {
  display: none;
}
.kill-li {
  width: 3rem;
  height: 5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.kill-img {
  width: 2.875rem;
  height: 2.875rem;
}
.kill-pNew {
  font-size: 0.75rem;
  color: #f33d25;
  font-weight: 700;
  margin-top: 0.625rem;
}
.kill-pOld {
  font-size: 0.75rem;
  color: #a7a7a7;
  text-decoration: line-through;
}

.div-quanbu {
  padding: 0 0.3125rem;
  height: 5.5rem;
  margin-right: 0.625rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  background-color: #f5f5f5;
}
.span-quanbu-img {
  width: 0.625rem;
  height: 0.625rem;
}
.span-quanbu {
  width: 0.625rem;
  font-size: 0.75rem;
  color: #666;
  margin: 0 auto;
}
/* 楼层1 */
.floor1 {
  width: 100%;
  height: 12.8125rem;
  margin-top: 0.625rem;
}
.floor1-ul {
  width: 100%;
  height: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  list-style: none;
}
.floor1-li {
  width: 23%;
  height: 6.375rem;
  border-radius: 0.625rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  margin-right: 0.125rem;
}
.floor1-imgOut {
  width: 100%;
  height: 6.375rem;
  border-radius: 0.625rem;
  position: absolute;
  top: 0;
  z-index: 1;
}
.floor1-imgIn {
  width: 3.4375rem;
  height: 3.4375rem;
  margin-top: 0.625rem;
  z-index: 1.1;
}
.floor1-span1 {
  width: 100%;
  font-size: 0.75rem;
  color: #fff;
  position: absolute;
  top: 4.375rem;
  left: 0;
  text-align: center;
  z-index: 2;
}
.floor1-span2 {
  width: 100%;
  font-size: 0.75rem;
  color: #fff;
  position: absolute;
  top: 5.375rem;
  left: 0;
  text-align: center;
  z-index: 2;
}
/* 楼层2 */
.floor2 {
  width: 85%;
  margin: 0.625rem auto;
  border-top-left-radius: 0.625rem;
  border-top-right-radius: 0.625rem;
  padding: 0.625rem;
  height: 5.75rem;
  display: flex;
  flex-direction: row;
  background-color: #fff;
  margin-bottom: 0;
}
.floor2-div {
  width: 9.375rem;
  height: 100%;
}
.floor2-title {
  font-size: 0.875rem;
  font-weight: 700;
  color: #000;
}
.floor2-msg {
  font-size: 0.875rem;
  color: #676767;
}
.floor2-img {
  width: 3.1875rem;
  height: 3.1875rem;
  margin-left: 0.625rem;
}
/* 楼层3 */
.floor3 {
  width: 85%;
  margin: 0 auto;
  border-bottom-left-radius: 0.625rem;
  border-bottom-right-radius: 0.625rem;
  padding: 0.625rem;
  height: 6.375rem;
  display: flex;
  flex-direction: row;
  background-color: #fff;
  padding-bottom: 0;
}
.floor3-div {
  width: 4.6875rem;
  height: 100%;
}
.floor3-title {
  font-size: 0.875rem;
  font-weight: 700;
  color: #000;
}
.floor3-msg {
  font-size: 0.875rem;
  color: #676767;
}
.floor3-img {
  width: 3.1875rem;
  height: 3.1875rem;
  margin-left: 0.625rem;
}
/* 楼层4 */
.floor4 {
  width: 100%;
  margin-top: 0.625rem;
  display: flex;
  flex-wrap: wrap;
  padding: 0 0.625rem;
}
.floor4-div {
  width: 9.1875rem;
  height: 15rem;
  border-radius: 0.625rem;
  margin-right: 0.625rem;
  margin-bottom: 0.625rem;
  background-color: #fff;
}
.floor4-img {
  width: 100%;
  height: 9.1875rem;
  border-top-left-radius: 0.625rem;
  border-top-right-radius: 0.625rem;
}
.floor4-middle {
  display: flex;
  flex-direction: row;
  position: relative;
  margin-bottom: 0.875rem;
}
.floor4-shopImg {
  width: 2.3rem;
  height: 0.8rem;
  border-radius: 0.1875rem;
  margin-top: 0.1875rem;
  margin-right: 0.3125rem;
}
.floor4-msg {
  position: absolute;
  left: 0;
  text-indent: 2.7rem;
  height: 1.9375rem;
  flex: 1;
  font-size: 0.625rem;
  color: #000;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  display: -moz-box;
  -moz-line-clamp: 2;
  -moz-box-orient: vertical;
  word-wrap: break-word;
  word-break: break-all;
  white-space: normal;
}
.floor4-bottom {
  width: 100%;
  height: 1.375rem;
  margin-top: 1.4rem;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
.floor4-p {
  width: 5.3125rem;
  display: flex;
  flex-direction: row;
}
.floor4-price {
  font-size: 0.875rem;
  font-weight: 700;
  color: #fa2c19;
}
.floor4-active {
  font-size: 0.75rem;
  height: 1rem;
  margin-left: 0.3125rem;
  color: #fb6863;
  border: 1px solid #fa2c19;
  border-radius: 0.1875rem;
}
.floor4-kan {
  width: 2.8125rem;
  height: 1.3125rem;
  text-align: center;
  border-radius: 1.3125rem;
  font-size: 0.75rem;
  background-color: #f0f2f5;
  color: #808080;
}
.floor4-vip {
  width: 100%;
  height: 1.625rem;
  padding-left: 0.3125rem;
}
.floor4-vipPrice {
  font-size: 0.625rem;
  font-weight: 700;
  color: #232326;
  margin-right: 0.3125rem;
}
.floor4-plus {
  width: 1.75rem;
  height: 0.5625rem;
  vertical-align: middle;
}
/* 加载区 */
.home-loading {
  width: 90%;
  margin: 0 auto;
  height: 2rem;
  padding-top: 0.625rem;
  border-top: 1px solid #d3d4d4;
}
.jiazai {
  text-align: center;
  font-size: 0.875rem;
  color: #848686;
}
/* 底部 */
.home-footer {
  margin-top: 0.625rem;
  background-color: #fff;
  margin-bottom: 2.8125rem;
}
.home-footer-top {
  width: 100%;
  height: 3.125rem;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
  border-top: 1px solid #e5e5e5;
  border-bottom: 1px solid #e5e5e5;
}
.home-footer-top p {
  width: 5.1875rem;
  height: 1.5rem;
  line-height: 1.5rem;
  text-align: center;
  border-right: 1px solid #e5e5e5;
  color: #848686;
  font-size: 0.875rem;
}
.home-footer-top p:nth-last-child() {
  border-right: 0;
}
.home-footer-middle {
  width: 100%;
  height: 4.3125rem;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-around;
  border-bottom: 1px solid #e5e5e5;
}
.home-footer-middle div {
  width: 7.4375rem;
  height: 3.75rem;
  display: flex;
}
.home-footer-middle div img {
  width: 3.75rem;
  height: 3.75rem;
  margin: 0 auto;
}
.home-footer-copy {
  width: 100%;
  height: 2.0625rem;
  line-height: 2.0625rem;
  text-align: center;
  color: #848686;
  font-size: 0.75rem;
}
/* 返回顶部按钮 */
a {
  color: #848686;
  text-decoration: none;
}
.backTop {
  width: 2.375rem;
  height: 2.375rem;
  border-radius: 50%;
  border: 0.1px solid #c5c5c5;
  position: fixed;
  right: 0.625rem;
  bottom: 6.875rem;
  display: flex;
  background-color: rgba(255, 255, 255, 0.8);
  z-index: -1;
}
.backTop img {
  width: 70%;
  height: 70%;
  margin: auto;
  border-radius: 50%;
}
</style>
